// 背景纹理
// @use "sass:math";
/// 红砖
/// @param {color} $fill_color - 填充颜色
@mixin brick($fill_color: #d58256) {
  $bg: lighten($fill_color, 20%);
  background-image: linear-gradient(335deg, $fill_color 6px, transparent 6px),
    linear-gradient(155deg, $fill_color 6px, transparent 6px),
    linear-gradient(335deg, $fill_color 6px, transparent 6px),
    linear-gradient(155deg, $fill_color 6px, transparent 6px);
  background-size: 15px 15px;
  background-position: 0 0, 2px 9px, 7px 8px, 9px 1px;
  background-color: $bg;
}

/// 半透明点页眉效果
/// @param {length} $height - 高度
@mixin semiTransparentDot($height: 40px) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $height;
  z-index: 999;
  background-image: radial-gradient(transparent 1px, #fff 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
}

/// 滚动条页眉显示效果
/// @param {length} $height - 高度
/// @param {length} $top - 顶部距离
/// @param {color} $fill_color - 填充颜色
@mixin scrollBar($height: 4px, $top: 40px, $fill_color: red) {
  $bg1: desaturate($fill_color, 60%);
  $bg2: desaturate($fill_color, 30%);
  // $bg1: scale-color($fill_color, $red: +10%, $green: +10%, $blue: -20%);
  // $bg2: invert($fill_color);
  position: fixed;
  width: 100%;
  height: $height;
  top: $top;
  left: 0;
  border-top-right-radius: $height;
  border-bottom-right-radius: $height;
  background-image: linear-gradient(to right, $bg1, $bg2, $fill_color);
  z-index: 999;
  animation: scroll_bar 2s linear;
  animation-timeline: scroll();
  will-change: width;
}

@keyframes scroll_bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@mixin scrollShow() {
  display: block;
  margin: 20px auto;
  width: 200px;
  aspect-ratio: 1.6; // 16:10
  transform-origin: center top;
  animation: scroll_show 2 linear;
  animation-timeline: show();
}

@keyframes scroll_show {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/// 圆环背景
@mixin circlePattern($width: 96px, $line_color: #9edae7) {
  $min: calc(50px * tan(pi * 60 / 180) + 5px);
  @if $width < $min {
    $width: $min;
  }
  $h: calc($width / tan(pi * 60 / 180));
  $bgOption: transparent 6px, $line_color 7px 8px, transparent 9px 14px,
    $line_color 15px 16px, transparent 17px 22px, $line_color 23px 24px,
    transparent 25px;
  background-image: radial-gradient(circle at top left, $bgOption),
    radial-gradient(circle at top right, $bgOption),
    radial-gradient(circle at 100% 100%, $bgOption),
    radial-gradient(circle at 0 100%, $bgOption),
    radial-gradient(circle at 50% 50%, $bgOption);
  background-size: $width $h;
  min-height: $width * 4;
}

/// 孔洞效果；需要（105 - 3 * 4）标签
@mixin hole($width: 0.625em, $bg: #17181c) {
  display: grid;
  grid-template-columns: repeat(15, $width);
  grid-template-rows: repeat(7, $width);
  align-content: center;
  justify-content: center;
  @content;
  .item {
    width: 50%;
    height: 50%;
    background-color: $bg;
    border-radius: 50px;
    box-shadow: 0 $width * -0.1 $width * 0.1 #abafba,
      0 $width * 0.1 $width * 0.1 #e3e4e8;
    transition: box-shadow 0.5s;
    &:nth-child(25) {
      grid-column: 1;
    }
    &:nth-child(12),
    &:nth-child(70) {
      grid-column: 2;
    }
    &:first-child,
    &:nth-child(83) {
      grid-column: 3;
    }
  }
}
